<template>
	<div class='pagination'>
		<button @click="changeBtn">首页</button>
		<button @click="changeBtn">上一页</button>
		<button v-if="isShow" class="pagebtn">...</button>
		<button v-for="btn in pagebtns":class="[{currentPage:btn===currentPage},'pagebtn']"@click="changeBtn(btn)">
			{{btn}}
		</button>
		<button @click="changeBtn">下一页</button>
	</div>
</template>

<script>
	export default {
		name: 'Pagination',
		data () {
			return {
				pagebtns: [1, 2, 3, 4, 5, '...'],
				currentPage: 1,
				isShow: false
			}
		},
		methods: {
			changeBtn (page) {
				if(typeof page != 'number') {
					switch(page.target.innerText) {
						case '首页':
							this.pagebtns = [1, 2, 3, 4, 5, '...']
							this.changeBtn(1)
							break;
						case '上一页':
							if(this.currentPage !== 1) {
								this.changeBtn(this.currentPage - 1)
							}
							break;
						case '下一页':
							this.changeBtn(this.currentPage + 1)
							break;
						default:
							break;
					}
					return
				}
				this.currentPage = page
				this.isShow = page > 4
				if(page === this.pagebtns[4]) {
					this.pagebtns.shift()
					this.pagebtns.splice(4, 0, this.pagebtns[3] + 1)
				} else if(page === this.pagebtns[0] && page != 1) {
					this.pagebtns.unshift(this.pagebtns[0] - 1)
					this.pagebtns.splice(5, 1)
				}
				this.$emit('handle', this.currentPage)
			}
		}
	}
</script>

<style scoped>
	.pagination {
    margin-top: 5px;
    margin-bottom: 20px;
    background-color: white;
    padding: 6px 20px;
    border-radius: 5px;
    border: 1px solid #888888;
    box-shadow:0 0 1px 1px #eee;
  }

  button {
    background-color: #fff;
    border: 1px solid #ddd;
    color: #778087;
    border-radius: 3px;
    outline: none;
    height: 21px;
    cursor: pointer;
    padding: 0 2px;
    width: 55px;
    height: 29px;
  }

  .pagebtn {
    position: relative;
    bottom: 1px;
    width: 40px;
    margin: 0 4px;
  }

  .currentPage {
    color: white;
    background-color: #1f1b1b;

  }
</style>